<template>
    <div class="completeProfileTwo">
        <div class="body">
            <div class="middle_wrapper">
                <p>{{language.completeProfileTwo_title}}</p>
                <div class="photo_box">
                    <div class="photo_bg" :style="{backgroundImage:'url('+photoAvatar+')'}"></div>
                    <input @change="addPhoto" type="file" accept="image/*"><i></i></div>
                <div class="btn_box">
                    <input @change="addPhoto" type="file" accept="image/*" v-show="submitDesable">
                    <button @click="uploadPhoto" class="btn">
                        <loading :props="{show:loadingAjax,type:'btn'}"></loading>
                        {{upPhotoText}}
                    </button>
                </div>
            </div>
            <router-link :to="{name:'me'}" class="skip">{{language.unify_skip}}
            </router-link>
        </div>
        <publicDialog :props="dialogData"></publicDialog>
    </div>
</template>
<script>
import globalMixin from '../common/globalMixin'
import * as API from '../api'
import loading from './Loading'
import publicDialog from './PublicDialog'

export default {

    name: 'completeProfileTwo',

    mixins: [globalMixin],

    components: {
        publicDialog,
        loading
    },

    data() {
        return {
            photoFile: '',
            photoBase: '',
            photoWidth: 0,
            photoHeight: 0,
            loadingAjax: false,
            submitDesable: true,
            dialogData:{},
        }
    },

    activated() {
        this.dialogData = {};
    },

    computed: {
        photoAvatar() {
            var photo, userInfo = this.getUserInfo();
            if (this.photoBase) {
                photo = this.photoBase;
            } else {
                if (userInfo.pictures.length > 0) {
                    photo = this.getAvatar(userInfo.account.gender, userInfo.pictures[0].icon);
                } else {
                    photo = this.getAvatar(userInfo.account.gender);
                }
            }
            return photo;
        },

        upPhotoText() {
            return this.photoBase ? this.language.unify_upload : this.language.unify_chooseAPhoto;
        },
    },

    methods: {

        getUserInfo() {
            return this.$store.state.user.userInfo;
        },

        uploadPhoto() {
            if (!this.checkImgSize()) {
                tthis.dialogData = {
                    top:0,
                    position: 'top',
                    type: 'error',
                    content: {
                        info: this.language.unify_imgSzieErrOne,
                    }
                };
            } else if (!this.checkImgWidthORheigthMinPX()) {
                tthis.dialogData = {
                    top:0,
                    position: 'top',
                    type: 'error',
                    content: {
                        info: this.language.unify_imgSzieErrTwo,
                    }
                };
            } else if (!this.loadingAjax) {
                this.loadingAjax = true;
                let tthis = this,
                    obj = {},
                    data = new FormData();

                data.append("file", this.photoFile);
                data.append("album_type", -1);
                obj.data = data;
                obj.photoType = 'public';
                obj.callback = function(data) {
                    console.log('callback', data);
                    if (data.status_code == 0) {
                        tthis.$router.push({
                            name: 'me'
                        })
                    } else if (data.status_code == 2 || data.status_code == 5) {
                        tthis.dialogData = {
                            top:0,
                            position: 'top',
                            type: 'error',
                            content: {
                                info: data.msg,
                            }
                        };
                    }
                };
                obj.complete = function(data) {
                    tthis.loadingAjax = false;
                };
                this.$store.dispatch('user_uploadPhoto', obj);
            }
        },

        addPhoto: function(e) {
            var tthis = this,
                reader;
            this.photoFile = e.target.files[0];
            if (this.photoFile) {
                reader = new FileReader();
                reader.readAsDataURL(this.photoFile);
                reader.onload = function(e) {
                    if (this.result.indexOf('image') < 0) {
                        alert('Invalid format');
                    } else {
                        tthis.photoBase = this.result;
                        tthis.submitDesable = false;
                        let img = new Image();
                        img.src = this.result;
                        img.onload = function() {
                            tthis.photoWidth = img.naturalWidth;
                            tthis.photoHeight = img.naturalHeight;
                        };
                    }
                }
            }
        },

        checkImgSize() {
            let bool = true;
            if (this.photoFile.size >= 5140000) {
                bool = false;
            }
            return bool;
        },

        checkImgWidthORheigthMinPX() {
            let bool = true;
            if (this.photoWidth < 144 || this.photoHeight < 144) {
                bool = false;
            }
            return bool;
        },
    },
}

</script>
<style scoped>
.completeProfileTwo {
    height: 100%;
    min-height: 430px;
    background: #fff;
    text-align: center;
}

.completeProfileTwo .middle_wrapper {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 340px;
    margin-top: -170px;
}

.completeProfileTwo .middle_wrapper .photo_box {
    position: relative;
    width: 210px;
    height: 210px;
    margin: 20px auto;
}

.completeProfileTwo .middle_wrapper .photo_box input[type='file'] {
    position: absolute;
    z-index: 9;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}

.completeProfileTwo .middle_wrapper .photo_box .photo_bg {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #f3f3f3;
    background-size: cover;
    background-repeat: no-repeat;
}

.completeProfileTwo .btn_box {
    position: relative;
    width: 80%;
    margin: auto;
}

.completeProfileTwo .middle_wrapper input[type='file'] {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}

.completeProfileTwo .middle_wrapper i {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    background: url(../assets/ico_add_border.png) no-repeat center;
    background-size: 40px;
}

.completeProfileTwo .middle_wrapper p {
    text-align: center;
    color: #666;
    font-size: 14px;
}

.completeProfileTwo .skip {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    padding: 10px 0 25px;
    color: #C3C3C3;
    font-size: 14px;
}

</style>
